<template>
  <div class="api-macro-def">
    <WmcCard title="API开关宏定义">
      <el-row>
        <el-col
          :span="11"
          v-for="item in APIMacroDef"
          v-bind:key="item.name"
          class="textarea"
        >
          {{ item.name }}
        </el-col>
      </el-row>
    </WmcCard>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, watch, ref } from 'vue'
import WmcCard from '@/render/base-ui/card'
import { IConfigData } from '@/render/store/drives/types'
import emitter from '@/render/utils/mitt'

export default defineComponent({
  components: {
    WmcCard
  },
  props: {
    modelValue: {
      type: Array as PropType<IConfigData[]>,
      dafault: () => []
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const APIMacroDef = ref(props.modelValue)

    watch(
      APIMacroDef,
      (n) => {
        emit('update:modelValue', n)
        emitter.emit('update-tab', 'emitter')
      },
      {
        deep: true
      }
    )
    watch(
      props,
      (n) => {
        APIMacroDef.value = n.modelValue
      },
      {
        deep: true
      }
    )
    return { APIMacroDef }
  }
})
</script>

<style scoped></style>
